<template>
	<view class="index" :style="{'--color':vuex_config.price,'--bgc':vuex_config.themeColor1}" v-if="show">
		<view class="titlebox" :style="type==1?'margin-bottom: 150rpx;':'margin-bottom: 106rpx;'">
			<view :class="['type',type==1?'active':'']" @click="change">区域</view>
			<view :class="['type1',type==2?'active':'']" @click="change">产品</view>
			<view class="xinxi">
				<image class="headimg" :src="vuex_user.headimgurl" mode=""></image>
				<text>{{vuex_user.nickname+'('+vuex_user.pk_id+')'}}</text>
			</view>
			<view class="titleList">
				<text class="title-item" v-if="type == 1">区域等级：{{vuex_user.regional_agent_type || '未设置'}}</text>
				<text class="title-item">地区：{{vuex_user.region_name || '未设置'}}</text>
				<text class="title-item">订单总数：{{totalNum || 0}}</text>
				<text class="title-item">总金额：{{total_amount.toFixed(2) || 0}}</text>
				<text class="title-item" v-if="type == 1">服务费：{{total_service_charge.toFixed(2) || 0}}</text>
				<text class="title-item" v-if="type == 2">返佣总额：{{profit_amount.toFixed(2) || 0}}</text>
			</view>
		</view>
		<view class="search">
			<view class="u-flex">
				<view class="searchbox">
					<text>开始：</text>
					<u-input v-model="search.start_date" :type="type" disabled="true" placeholder='请选择时间'
						@click="showprop('star')" />
				</view>
				<view class="searchbox">
					<text>结束：</text>
					<u-input v-model="search.end_date" :type="type" disabled="true" placeholder='请选择时间'
						@click="showprop('end')" />
				</view>
			</view>
		</view>
		<view class="data-list">
			<view class="data-item" v-for="(item, index) in dataList" :key="index">
				<view class="data-number">订单号：{{ item.order_no }}</view>
				<view class="data-content">
					<view class="data-cell" v-if="type == 2">
						<text class="data-user">产品名称：{{ item.pro_name}}</text>
					</view>
<!-- 					<view class="data-cell">
						<text class="data-user">联系人：{{ item.name+'（'+ item.mobile+'）' }}</text>
					</view> -->
					<view class="data-cell">
						金额：
						<text class="num">{{ item.price || 0}}</text>
					</view>
					<view class="data-cell" v-if="type == 2">
						返佣：
						<text class="num">{{ item.profit || 0}}</text>
					</view>
					<view class="data-cell">下单时间：{{ item.date_creation | formTime() }}</view>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
		<sww-login></sww-login>
		<u-picker v-model="starShow" mode="time" @confirm='starchange'></u-picker>
		<u-picker v-model="endShow" mode="time" @confirm='endchange'></u-picker>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging'
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				show: false,
				type: 1,
				total_amount: 0,
				total_service_charge: 0,
				profit_amount:0,
				totalNum: 0,
				starShow: false,
				endShow: false,
				onecome: false,
				search: {
					start_date: '',
					end_date: '',
					pay_status: -1,
					pay_type: -1
				}
			}
		},
		filters: {
			formTime(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
			}
		},
		onLoad() {
			if (this.vuex_user.region_name == 0 && !this.vuex_user.regional_agent_type && this.vuex_user.regional_agent ==
				1) {
				this.$toast('你不是区域代理商')
				setTimeout(() => {
					this.uniBack(1)
				}, 1000)
				return
			} else {
				this.show = true
			}
			this.$login('initPage').then(() => {
				this.initPage()
			})

		},
		onReachBottom: function() {
			this.loadMore();
		},
		onPullDownRefresh() {
			this.search.start_date = ''
			this.search.end_date = ''
			this.onecome = false
			this.initPage()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			initPage() {
				if (this.onecome && !this.search.start_date || this.onecome && !this.search.end_date) {
					return this.$toast('请选择时间段')
				} else {
					this.onecome = true
				}
				let that = this
				let params = {
					...this.search,
					pk_id: this.vuex_business.pk_id
				}
				if (this.type == 1) {
					params.area = this.vuex_user.region_name || '请选择'
					params.agent_id = this.vuex_user.regional_agent || 0
				} else {
					params.agent_id = this.vuex_user.regional_agent || 0
				}
				this._init_data(this.type == 1 ? 'GetRegionalAgentOrderList' : 'GetProAgentOrderAllList', params, {
					callBack: function(data) {
						that.total_amount = data[0].total_amount
						that.total_service_charge = data[0].total_service_charge
						that.totalNum = data[0].order_count
						if(that.type == 2) that.profit_amount = data[0].profit_amount
						return data
					}
				})
			},
			change() {
				this.type = this.type == 1 ? 2 : 1
				this.search.start_date = ''
				this.search.end_date = ''
				this.onecome = false
				this.initPage()
			},
			showprop(val) {
				if (val == 'star') {
					this.starShow = true
				} else {
					this.endShow = true
				}
			},
			starchange(val) {
				this.search.start_date = val.year + '-' + val.month + '-' + val.day
			},
			endchange(val) {
				this.search.end_date = val.year + '-' + val.month + '-' + val.day
				this.initPage()
			},
			loadMore() {
				this._load_data();
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.index {
		.titlebox {
			width: 100%;
			background-color: var(--bgc);
			position: relative;
			display: flex;
			justify-content: center;
			height: 400rpx;
			margin-bottom: 150rpx;

			.type {
				position: absolute;
				top: 40rpx;
				right: -30rpx;
				color: #fff;
				width: 90rpx;
				height: 40rpx;
				border-radius: 20rpx 0 0 20rpx;
				background-color: rgba(255, 255, 255, 0.4);
				padding: 0 20rpx;
				box-sizing: content-box;

			}

			.type1 {
				position: absolute;
				top: 90rpx;
				right: -30rpx;
				color: #fff;
				width: 90rpx;
				height: 40rpx;
				border-radius: 20rpx 0 0 20rpx;
				background-color: rgba(255, 255, 255, 0.4);
				padding: 0 20rpx;
				box-sizing: content-box;

			}

			.active {
				background-color: rgba(255, 255, 255, 1);
				color: var(--bgc);
				transition: all 1s;
			}

			.xinxi {
				padding-top: 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #fff;

				.headimg {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}
			}

			.titleList {
				width: 690rpx;
				position: absolute;
				top: 300rpx;
				left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				.title-item {
					width: 50%;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: var(--color);
				}
			}
		}

		.search {
			width: 100%;
			background-color: #fff;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;

			.searchbox {
				flex: 1;
				display: flex;
				align-items: center;

				text {
					width: 120rpx;
				}
			}
		}

		.data-list {
			width: 100%;
			padding: 0 24rpx;
		}

		.data-item {
			width: 100%;
			padding: 0 30rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			font-size: 26rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.data-number {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1px solid #f5f5f5;
		}

		.data-content {
			width: 100%;
			padding: 20rpx 0;

			.data-title {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 10rpx;
			}

			.data-cell {
				line-height: 48rpx;

				.num {
					color: #e93324;
				}

				.data-user {
					display: inline-block;
					max-width: 480rpx;
				}
			}
		}
	}
</style>
